<template>
    <div class="layout">
        <Sider :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto'}">
            <navMenu></navMenu>
        </Sider>
        <Layout :style="{marginLeft: '200px'}">
            <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}">
                <Menu mode="horizontal" :style="{top:'5px',right:'10px', position:'absolute'}">
                    <MenuItem name="1">
                        <Badge>
                            <Icon type="ios-notifications-outline" size="26"></Icon>
                        </Badge>

                    </MenuItem>
                    <Submenu name="3">
                        <template slot="title">
                            <Icon type="ios-contact"/>
                            {{user.nickName}}
                        </template>
                        <MenuItem name="3-1">基本资料</MenuItem>
                        <MenuItem name="3-2" @click.native="handleLogout">登出</MenuItem>
                    </Submenu>
                </Menu>

            </Header>
            <Content :style="{padding: '0 16px 16px'}">
                <breadNav></breadNav>
                <Card>
                    <router-view/>
                </Card>
            </Content>
        </Layout>
    </div>
</template>

<script>
    import {mapActions} from "vuex";
    import navMenu from "_c/nav-menu/nav_menu";
    import breadNav from "_c/bread-nav/break-nav";

    export default {
        name: "Main",
        components: {
            navMenu, breadNav
        },
        created() {
            this.getUserInfo();
        },
        data() {
            return {}
        },
        methods: {

            ...mapActions([
                'logout', 'getUserInfo'
            ]),
            handleLogout() {
                this.logout().then(() => {
                    this.$Message.success("登出成功")
                    this.$router.push({name: "login"});
                })

            }
        },
        computed: {
            user() {
                return this.$store.state.user
            }
        }
    };
</script>

<style lang="scss" scoped>
    .home-header {
        display: flex;
        justify-content: center;
        align-content: center;

        .logout-btn {
            display: block;
            margin-left: auto;
        }
    }

    .nav-bar {
        padding: 30px;

        a {
            font-weight: bold;
            color: #2c3e50;

            &.router-link-exact-active {
                color: #42b983;
            }
        }
    }
</style>
